import { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router";

import Card from "@/components/Card";
import DataItem from "@/components/DataItem";
import BlockItem from "@/components/BlockItem";
import ActionSheet from "@/components/ActionSheet";
import Title from "@/components/Title";

import Tab from "./Tab";

import { useSelector } from "react-redux";
import { selectStoreId } from "@/store/user";

import styles from "./style.module.css";
import MDXSGVF from "@/assets/门店销售备份 2.svg?react";
import DSHDJ from "@/assets/待审核单据.svg?react";
import YHD from "@/assets/要货单备份.svg";

import { useFetch } from "@/hooks";
import request from "@/api/request";

import { tabs, pendingPreviewSequence } from "./constant";

// const modules = import.meta.glob("/src/assets/*.svg");

// for (const path in modules) {
//   modules[path]().then((module) => {
//     console.log(`Loaded module from ${path}:`, module.default);
//   });
// }

const Home = () => {
  const navigate = useNavigate();
  const storeid = useSelector(selectStoreId);
  const [tab, setTab] = useState("");
  const [store, setStore] = useState("请选择store");
  const [visible, setVisible] = useState(false);
  const { res: orderPendingReview = {}, refresh: ppRefresh } = useFetch(
    `/me-api/pending-preview`
  );
  const { res: actions = [], refresh: gsRefresh } = useFetch(
    `/me-api/grocery-store`
  );
  const { res: boardData = {}, refresh: hdRefresh } = useFetch(
    `/me-api/homedata?cat=${tab}`,
    { aborter: new AbortController() },
    () => tab !== ""
  );

  const handleTabChange = (tab) => {
    setTab(tab);
    // const controller = new AbortController();
    // request(`/me-api/homedata?cat=${tab}`, {signal: controller.signal}).then(res => {
    //   // setData
    // })
  };

  const handleSelect = (action) => {
    console.log(action);
    setStore(action.text);
    setVisible(false);

    ppRefresh();
    gsRefresh();
    hdRefresh();
  };

  const handleCancel = () => {
    setVisible(false);
  };

  useEffect(() => {
    // hack 避开strictmode重复渲染导致初次请求被中断的问题
    setTimeout(() => {
      setTab("today");
    });
  }, []);

  useEffect(() => {
    if (storeid && actions.length > 0) {
      const storeInfo = actions.find((it) => it.id === String(storeid));
      setStore(storeInfo?.storename || "----");
    }
  }, [storeid, actions]);

  // 新api use的样板代码
  // const orderPendingReview = use(fetch('url').then(res => res.json()))

  return (
    <>
      <div className="overflow-hidden w-full absolute">
        <div className={styles.circle}></div>
      </div>
      <Title className={styles.title}>超级店长</Title>
      <div className={styles["grocery-area"]} onClick={() => setVisible(true)}>
        {store}
      </div>
      <div className="flex flex-col gap-[24px] relative pb-[80px]">
        <Card>
          <BlockItem icon={YHD} text={"要货单"} />
          <BlockItem icon={YHD} text={"进货单"} />
          <BlockItem icon={YHD} text={"进货单"} />
          <BlockItem icon={YHD} text={"进货单"} />
          <BlockItem icon={YHD} text={"进货单"} />
          <BlockItem icon={YHD} text={"进货单"} />
          <BlockItem icon={YHD} text={"进货单"} />
          <BlockItem icon={YHD} text={"进货单"} />
        </Card>

        <Card icon={DSHDJ} title="待审核单据">
          <div className="flex gap-x-[12px] overflow-x-scroll">
            {pendingPreviewSequence.map((it, index) => {
              const { value, text } = orderPendingReview[it] || {};
              return (
                <DataItem
                  className={styles.cube}
                  value={value}
                  text={text}
                  key={it}
                />
              );
            })}
          </div>
        </Card>

        <Tab tabs={tabs} onTabClick={(tab) => handleTabChange(tab)} />

        <Card icon={MDXSGVF} title="门店销售" data={boardData.mdxs}>
          <DataItem key="sell" className="w-[33%]" />
          <DataItem key="rtn" className="w-[33%]" />
          <DataItem key="atv" className="w-[33%]" />
          <DataItem key="netSales" className="w-[33%]" />
          <DataItem key="voucher" className="w-[33%]" />
          <DataItem key="standbyFund" className="w-[33%]" />
        </Card>

        <Card icon={MDXSGVF} title="门店客流">
          <DataItem value={123442.123} text={"销货(元)192笔"} />
          <DataItem value={123442.123} text={"销货(元)192笔"} />
          <DataItem value={123442.123} text={"销货(元)192笔"} />
        </Card>

        <Card icon={MDXSGVF} title="线上拉新">
          <DataItem value={123442.123} text={"销货(元)192笔"} />
          <span className="vertical-line"></span>
          <DataItem value={123442.123} text={"销货(元)192笔"} />
        </Card>

        <Card icon={MDXSGVF} title="我的业绩">
          <DataItem value={123442.123} text={"销货(元)192笔"} />
          <span className="vertical-line"></span>
          <DataItem value={123442.123} text={"销货(元)192笔"} />
        </Card>

        <Card icon={MDXSGVF} title="我的拉新">
          <DataItem value={123442.123} text={"销货(元)192笔"} />
          <span className="vertical-line"></span>
          <DataItem value={123442.123} text={"销货(元)192笔"} />
        </Card>

        <Card icon={MDXSGVF} title="会员关怀">
          <div className="w-full">
            <DataItem
              className="w-[33%]"
              value={boardData.memberCare?.birthCare.value}
              text={boardData.memberCare?.birthCare.text}
              onClick={() => navigate("/member-care")}
            />
          </div>
        </Card>
      </div>
      <ActionSheet
        visible={visible}
        actions={actions.map((it) => ({ value: it.id, text: it.storename }))}
        onSelect={handleSelect}
        onCancel={handleCancel}
      />
    </>
  );
};

export default Home;
